<template>
	<view class="read-meter">
		<!-- tabs -->
		<tabs @tabClick="tabClick"></tabs>
		<!-- 趋势 -->
		<view class="tendency" v-show="tabActive==0">
			<!-- 滑动 tabs -->
			<view class="scroll-tab">
				<msTabs :list="scrollList" v-model="scrollActive"></msTabs>
			</view>
			<view v-show="hasData" class="content m16">
				<!-- 图表 -->
				<uchartTools
					:chartParams="chartParams"
					:showTools="showTools"
					ref="redMeterUchart">
				</uchartTools>
				<!-- 表格 -->
				<pTable 
					:caption="tableParams.caption"
					:heads="tableParams.heads"
					:bodys="tableParams.bodys">
				</pTable>
			</view>
			<view v-show="!hasData" class="no-data">
				暂无数据
			</view>
		</view>
		<!-- 明细 -->
		<view class="details m16" v-show="tabActive==1">
			<view class="bgw br6 mb16" v-for="(item, index) in readMeterArr" :key="index">
				<view class="mlr20">
					<list
						label="应收金额"
						class="bb ptb8"
						color="red"
						:value="item.nowPayMoney+'元'"
						:hasRightIcon="hasRightIcon"
						rightIconName="question"
						@rightIconClick="rightIconClick(index)">
					</list>
					<view class="flex-h-c mt10">
						<view class="is-pay" :class="item.payFlag==0?'bg-orange':'bg-blue'">
							<i class="iconfont" :class="item.payFlag==0?'iconfont-pay-q':'iconfont-pay'"></i>
							<text>{{item.payFlag==0?'未缴费':'已缴费'}}</text>
						</view>
						<view class="flex1">
							<list label="上次底数" :value="item.lastNum+tag.unit" ></list>
							<list label="本次底数" :value="item.nowNum+tag.unit" ></list>
							<list class="red" :label="'用'+tag.lable" :value="item.nowUseNum+tag.unit" ></list>
						</view>
					</view>
					<list label="抄表日期" :value="item.nowReadDate|dateFormate" ></list>
				</view>
			</view>
			<!-- 加载loading -->
			<view class="weui-loadmore" :hidden="isHideLoadMore">
				<view class="weui-loading"></view>
				<view class="weui-loadmore__tips">正在加载</view>
			</view>
			<!-- 没有数据 -->
			<view class="no-data" v-if="noData" :hidden="!isHideLoadMore">
				没有更多数据
			</view>
		</view>
		<!-- 自定义弹窗 -->
		<popup ref="popup" type="center" :mask-click="false">
			<view class="uni-tip">
				<view class="uni-tip-title blue bb">信息</view>
				<view class="uni-tip-content">
					<list
						label="上次读数"
						class="ptb8"
						:value="alertMsg.lastNum+tag.unit">
					</list>
					<list
						label="本次读数"
						class="ptb8"
						:value="alertMsg.nowNum+tag.unit">
					</list>
					<list
						label="本次用量"
						class="ptb8"
						color="red"
						:value="alertMsg.nowUseNum+tag.unit">
					</list>
					<list
						label="本次抄表日期"
						class="ptb8"
						:value="alertMsg.nowReadDate|dateFormate">
					</list>
					<list
						label="本次应收金额"
						class="ptb8"
						color="red"
						:value="alertMsg.nowPayMoney+'元'">
					</list>
					<list
						label="费用构成"
						class="ptb8"
						value=''>
					</list>
					<list
						:value="alertMsg.itemPayArray[0].itemPayMemo">
					</list>
				</view>
				<view class="uni-tip-group-button">
					<button class="able-button" @click="cancel('tip')">关闭</button>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
import list from '../../components/List.vue';
import msTabs from '../../components/ms-tabs/ms-tabs.vue';
import tabs from '../../components/tabs/tabs.vue';
import uchartTools from '../../components/u-charts/u-chart-tools.vue';
import pTable from '../../components/p-table/table/table.vue';
import popup from '../../components/uni-popup/uni-popup.vue';
let util = require('../../utils/utils.js');
let api = require('../../utils/api.js');
export default {
	data() {
		return {
			user: {},
			tag:{},
			options:{},
			hasRightIcon: true, // 显示右侧图标
			scrollList: [], // 滚动 tab list
			tabActive: 0, // 顶部 tab 下标
			scrollActive: 0, // 滚动 tab 下标
			chartParams: {
				chartType: 'line',
				opts: {
					categories:[],
					series:[{
							name: '',
							data: [],
							color: '#8A8B97'
						}],
					yAxis: {
						splitNumber: 5
					}
					
				},
				title: '用量历史统计',
				unit: '方'
			},
			tableParams: { // 明细表格
				caption: '每月用量明细',
				heads: ['日期', '用量(方)'],
				bodys: []
			},
			showTools: false, // 不显示日期选择器
			readMeterArr: [], // 抄表明细 数组
			curPageNo: 1, // 抄表明细 page
			noData: false, // 没有数据
			isHideLoadMore: true, // 是否隐藏加载更多
			alertMsg: {},
			hasData: true, // 是否有数据
			monthArr: [] // 月份
		};
	},
	components: {
		list,
		msTabs,
		uchartTools,
		tabs,
		pTable,
		popup
	},
	filters: {
		dateFormate: function(val) { // 时间格式化
			return util.formateByDate(val);
		}
	},
	onLoad(options) {
		this.tag = getApp().globalData.tag;
		let unit = this.tag.unit;
		this.chartParams.unit = unit;
		this.tableParams.heads =  ['月份', `用量(${unit})`];
		
		this.options = options;
		this.getThreeYears();
		this.getMonthArr();
	},
	onReady() {
		this.getChartDataByYear(this.scrollList[this.scrollActive].title);
	},
	watch: {
		tabActive(val) {
			if(val == 1) { // 监听顶部 tab
				this.readMeterArr = [];
				this.getReadMeterArr();
			}
		},
		scrollActive(val) { // 监听滚动 tab
			this.getMonthArr();
			this.getChartDataByYear(this.scrollList[val].title)
		}
	},
	methods: {
		// 最近三年
		getThreeYears() {
			let year = Number(util.getNowTime().slice(0,4));
			for(let i = 0; i < 3; i++) {
				this.scrollList.push({title: year})
				year--;
			}
		},
		// 判断月份是否存在
		isHasMonth(listArr,month){
			return listArr.filter((item)=>{
				return month == item.useMonth.slice(4,6);
			})
		},
		// 计算月份长度
		getMonthArr(){
			this.monthArr = [];
			let nowYear = new Date().getFullYear();
			if(nowYear == this.scrollList[this.scrollActive].title) { // 截止当前月
				let nowMonth = new Date().getMonth() + 1;
				
				while(nowMonth > 0) {
					this.monthArr.unshift(nowMonth)
					nowMonth--;
				}
			} else { // 12 个月
				for(let i = 1; i < 13; i++) {
					this.monthArr.push(i)
				}
			}
		},
		/**获取图表数据
		 * @param {String} year 当前年
		 */
		async getChartDataByYear(year) {
			let data = await api.getReadMeterDataByYear(this.options,year);
			let listArr = data.data.listArray;
			// 清空旧数据
			this.chartParams.opts.categories = [];
			this.chartParams.opts.series[0].data = [];
			this.tableParams.bodys = [];
			
			if(listArr.length) {
				let newArray = [];
				this.hasData = true; // 显示图表
				
				this.chartParams.opts.yAxis.splitNumber = util.setSplitNumber(listArr, 'useNum');
				
				this.monthArr.forEach((v, i) => {
					let itemArr = this.isHasMonth(listArr,v);
					if(itemArr.length) {
						newArray.push(itemArr[0]);
					}else{
						newArray.push({
							useMonth:v<10?`${String(year)}0${v}`:`${String(year)+v}`,
							useNum:'0'
						})
					}
				})
				
				newArray.forEach((item, index) => {
					// 设置图表数据
					this.chartParams.opts.categories.push(item.useMonth.slice(4,6));
					this.chartParams.opts.series[0].data.push(item.useNum);
					// 设置表格数据
					this.tableParams.bodys.push([item.useMonth.slice(4,6), item.useNum===''?'0':item.useNum]);
				})
				console.log('返回数据',listArr)
				this.$refs.redMeterUchart.$refs.uchartTools.updateData(this.chartParams);
			} else {
				this.hasData = false; // 隐藏图表
			}
		},
		/**
		 * 获取抄表明细
		 */
		async getReadMeterArr() {
			if(this.noData) return;
			this.isHideLoadMore = false; // 显示loading
			let data = await api.getReadMeterData(this.options,this.curPageNo);
			this.isHideLoadMore = true; // 隐藏loading
			this.readMeterArr = this.readMeterArr.concat(data.listArray);
			if(this.curPageNo == data.totalPages) {
				this.noData = true; // 无数据提示
			} else {
				this.curPageNo++;
			}
		},
		// 点击右侧图标 打开弹窗
		rightIconClick(i) {
			this.alertMsg = this.readMeterArr[i];
			console.log(this)
			this.$refs.popup.open();
		},
		// 顶部 tab 点击事件
		tabClick(i) {
			this.tabActive = i;
		},
		cancel() { // 关闭弹窗
			this.$refs.popup.close();
		}
	},
	// 页面触底加载更多
	onReachBottom() {
		if(this.tabActive == 1) {
			this.getReadMeterArr();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $uni-bg-color-grey;
}
.read-meter {
	.is-pay {
		width: $uni-img-size-xl;
		height: $uni-img-size-xl;
		margin-right: 30upx;
		color: $uni-color-white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		>i {
			font-size: $uni-img-size-base;
			margin-bottom:10upx;
		}
	}
	
	
}
</style>